<template>
    <div v-loading="loading" v-auto-resize ref="chartEl" class="chart-wrap" />
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import { subComponentMixin } from '@/mixins/client-analysis/'
import AutoResize from '@/directive/echart-resizer'

export default {
  name: 'ChartShipment',
  props: {
    type: {
      type: String,
      required: true
    }
  },
  mixins: [subComponentMixin, EchartsBase],
  directives: {
    AutoResize
  },
  data () {
    return {
      oChart: null,
      loading: true
    }
  },
  created () {
    this.debounceGetData()
  },
  methods: {
    async getData () {
      this.loading = true
      const url = this.type === 'day' ? 'getDeviceDaySaleQuantity' : 'getDeviceMonthSaleQuantity'
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/sale/${url}`, false),
          {
            params: this.requestParams
          })
      this.loading = false
      if (code === 0) {
        this.$nextTick().then(() => {
          this.oChart = echarts.init(this.$refs.chartEl)
          this.setOption(data)
        })
      }
    },
    setOption ({ saleList = [] }) {
      const color = '#d3d5da'
      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: color,
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }
      const yAxisBasic = {
        ...axisBasic,
        axisLine: {
          lineStyle: {
            color: color
          }
        }
      }
      const seriseData = [
        {
          name: '智能销量',
          type: 'bar',
          stack: 'summer',
          data: []
        },
        {
          name: '非智能销量',
          type: 'bar',
          stack: 'summer',
          data: []
        },
        {
          name: '智能产品占比',
          type: 'line',
          label: {
            show: true,
            textBorderColor: '#fff',
            position: 'top',
            formatter: '{c}%'
          },
          yAxisIndex: 1,
          data: []
        }
      ]
      const xAxisData = []
      // eslint-disable-next-line camelcase
      for (const { order_date, year_month, intel_sale_quantity, nonintel_sale_quantity, intel_ratio } of saleList) {
        // eslint-disable-next-line camelcase
        xAxisData.push(order_date || year_month)
        seriseData[0].data.push(intel_sale_quantity)
        seriseData[1].data.push(nonintel_sale_quantity)
        seriseData[2].data.push(intel_ratio.replace(/%$/, ''))
      }
      const option = {
        ...axisBasic,
        title: {
          text: `${this.type === 'day' ? '日' : '月'}出货量`,
          left: 'center'
        },
        color: ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['智能销量', '非智能销量', '智能产品占比'],
          bottom: '4%'
        },
        grid: {
          containLabel: true
        },
        xAxis: [
          {
            ...axisBasic,
            type: 'category',
            axisLine: {
              show: false
            },
            axisLabel: {
            //   rotate: this.type === 'day' ? 35 : 0
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            ...yAxisBasic,
            type: 'value',
            min: 0,
            axisLabel: {
              color: '#333',
              formatter: '{value}'
            }
          },
          {
            ...yAxisBasic,
            type: 'value',
            min: 0,
            axisLabel: {
              color: '#333',
              formatter: '{value} %'
            }
          }
        ],
        series: seriseData
      }
      this.oChart.setOption(option)
    }
  }
}
</script>

<style scoped>
    .chart-wrap {
        width: 100%;
        height: 100%;
    }
</style>
